<template>
	<el-container>
		<div style="width: 100%; text-align: center">
			<h2>修改密码</h2>
			<el-form ref="ruleForm" :model="formData" :label-width="'80px'" status-icon class="form-box">
				<el-row class="form-group">
					<el-col :span="24">
						<el-form-item :rules="{ required: true, message: '请输入当前密码', trigger: 'blur' }" label="原密码" prop="OldPasswd">
							<el-input v-model="formData.OldPasswd" placeholder="请输入当前密码" type="password" prop="OldPasswd" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="form-group">
					<el-col :span="24">
						<el-form-item :rules="[{ required: true, message: '请输入新密码', trigger: 'blur' }, { min: 6, max: 18, message: '密码不能小于6位大于18位' }]"  label="新密码" prop="Passwd">
							<el-input v-model="formData.Passwd" placeholder="请输入新密码" minlength="6" maxlength="18" prop="Passwd" type="password" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="form-group">
					<el-col :span="24">
						<el-form-item :rules="[{ required: true, message: '请再次输入新密码', trigger: 'blur' }, { min: 6, max: 18, message: '密码不能小于6位大于18位' }]"  label="确认密码" prop="NewPasswd">
							<el-input v-model="formData.NewPasswd" placeholder="请再次输入新密码" minlength="6" maxlength="18" prop="NewPasswd" type="password" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="form-group">
					<el-form-item>
						<el-button type="primary" @click="submit(ruleForm)">提交</el-button>
						<el-button @click="resetForm()">重置</el-button>
					</el-form-item>
				</el-row>
			</el-form>
		</div>
	</el-container>
</template>

<script lang="ts" setup>
// import { useRouter } from 'vue-router'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { httpReqeustApi } from '/@/api/linxyun/base'
import { Session } from '/@/utils/storage';
import { useUserInfo } from '/@/stores/userInfo';
import { useWebSite } from '/@/stores/websiteState';
import { useRoutesList } from '/@/stores/routesList';
const emit = defineEmits(["close", "refresh"])

const formData = reactive({
    OldPasswd: '',
    NewPasswd: '',
    Passwd: ''
})

const ruleForm = ref<FormInstance>()
const httpReqeust = httpReqeustApi();

const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
		if (formData.NewPasswd === formData.Passwd) {
			sendEditPasswdRequest()
		} else {
			ElMessage({ type: 'error', message: '两次输入的新密码不一致'});  
		}
    } else {
		ElMessage({ type: 'error', message: '请输入合法的数据'});  
      	return false
    }
  })
  cancel()
}

const sendEditPasswdRequest = () =>{
	let params = {}
	params['OldPasswd'] = formData.OldPasswd
	params['NewPasswd'] = formData.NewPasswd
	httpReqeust.Post('updateUserPasswd', params).then((response) => {
		console.log('Post', response)
		if (response.success) {
			ElMessage({
				type: 'success',
				message: '修改密码成功'
			});
			logout()
		} else {
			ElMessage({ type: 'error', message: '修改密码失败'});  
		}
	})
}

const resetForm = () => {
	ruleForm.value?.resetFields()
}

const logout = () => {
	// 清除缓存/token等
	Session.clear();
	const stores = useUserInfo();
	stores.setUserInfos(null);
	const webSite = useWebSite();
	webSite.setWebSite(null);
	const routesList = useRoutesList();
	routesList.setRoutesList([]);
	// 使用 reload 时，不需要调用 resetRoute() 重置路由
	window.location.reload();
}

/**
 * @description: 取消
 */
 const cancel = () => {
  emit('close', false)
}
</script>

<style scoped lang="scss">
.main {
    text-align: center;
}
.form-box{
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
}
.form-group{
    margin: 10px;
    padding: 10px 15px 10px 0
}
.label {
    padding-right: 10px;
    padding-left: 10px;
    display: inline-block;
    box-sizing: border-box;
    width: 110px;
    text-align: right;
}
 
.input {
    width: calc(100% - 120px);
    height: 28px;
}

.feedback{
    color: #d03050;
    font-size:14px;
    margin-top: 3px;
    text-align:left;
    margin-left:110px;
}
</style>
